<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span>
          <span>{{ $t('setting') }}</span>
        </span>
        <div style="float: right">
          <el-button
            type="success"
            :disabled="!linkage.linkageTag"
            @click="insertOrUpdateLinkageSettingToDevice"
          >{{ $t('confirm') }}
          </el-button>
          <el-button
            type="primary"
            :disabled="!linkage.linkageTag"
            @click="addSetting"
          >{{ $t('add') }}
          </el-button>
        </div>
      </div>
      <el-table
        :show-header="false"
        :data="settingList"
        style="min-height: 200px"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form>
              <el-form-item :label="$t('trigger')+$t('type')">
                <el-switch
                  v-model="props.row.triggerType"
                  :active-text="$t('continuity')"
                  :inactive-text="$t('edge')"
                  active-value="continuity"
                  inactive-value="edge"
                />
              </el-form-item>
              <el-form-item v-if="props.row.settingType !=='noParam'" :label="$t('auto') + $t('reset')">
                <el-switch
                  v-model="props.row.autoReset"
                  :active-text="$t('open')"
                  :inactive-text="$t('close')"
                />
              </el-form-item>
              <el-form-item v-if="props.row.autoReset" :label="$t('reset')+$t('value')">
                <div v-if="props.row.settingType === 'fixedParam'">
                  <el-select
                    v-model="props.row.resetValue"
                    filterable
                    :disabled="props.row.disabled"
                  >
                    <el-option
                      v-for="item in props.row.paramList"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                    />
                  </el-select>
                </div>
                <div v-else-if="props.row.settingType === 'switch'">
                  <el-switch
                    v-model="props.row.resetValue"
                    :disabled="props.row.disabled"
                    :active-text="$t('open')"
                    :inactive-text="$t('close')"
                    active-value="1"
                    inactive-value="0"
                  />
                </div>
                <div v-else-if="props.row.settingType === 'time'">
                  <el-time-picker
                    v-model="props.row.resetValue"
                    :disabled="props.row.disabled"
                    style="width:300px"
                    value-format="HH:mm"
                    format="HH:mm"
                    :placeholder="$t('timing')"
                  />
                </div>
                <div v-else-if="props.row.settingType === 'slider'">
                  <el-slider
                    v-model="props.row.resetValue"
                    style="width:360px"
                    :disabled="props.row.disabled"
                  />
                </div>
                <div v-else-if="props.row.settingType === 'custom'">
                  <el-input
                    v-model="props.row.resetValue"
                    style="width:300px"
                    :disabled="props.row.disabled"
                  />
                </div>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column :label="$t('setting')">
          <template slot-scope="scope">
            <div style="display: flex;justify-content: space-between">
              <div class="flex">
                <el-cascader
                  v-model="scope.row.selectedSetting"
                  style="width: 250px;margin-right: 5px"
                  filterable
                  :options="sensorWithSettingSelectList"
                  expand-trigger="hover"
                  @change="settingChange(scope.row)"
                />
                <div v-if="scope.row.settingType === 'fixedParam'">
                  <el-select
                    v-model="scope.row.value"
                    filterable
                    :disabled="scope.row.disabled"
                  >
                    <el-option
                      v-for="item in scope.row.paramList"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                    />
                  </el-select>
                </div>
                <div v-else-if="scope.row.settingType === 'switch'">
                  <el-switch
                    v-model="scope.row.value"
                    :disabled="scope.row.disabled"
                    :active-text="$t('open')"
                    :inactive-text="$t('close')"
                    active-value="1"
                    inactive-value="0"
                  />
                </div>
                <div v-else-if="scope.row.settingType === 'time'">
                  <el-time-picker
                    v-model="scope.row.value"
                    :disabled="scope.row.disabled"
                    style="width:300px"
                    value-format="HH:mm"
                    format="HH:mm"
                    :placeholder="$t('timing')"
                  />
                </div>
                <div v-else-if="scope.row.settingType === 'slider'">
                  <el-slider
                    v-model="scope.row.value"
                    style="width:300px"
                    :disabled="scope.row.disabled"
                  />
                </div>
                <div v-else>
                  <el-input
                    v-model="scope.row.value"
                    style="width:300px"
                    :disabled="scope.row.disabled"
                  />
                </div>
              </div>
              <el-button
                type="danger"
                class="el-icon-delete"
                @click="delSetting(scope.row)"
              />
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import {
  insertOrUpdateLinkageSettingToDevice,
  insertOrUpdateLinkageSettingToServer,
  listLinkageSetting
} from '@/api/iot/iotDeviceLinkageSettingApi'
import { failureNotice, formatSensorType, successNotice } from '@/util/common'
import { listSensorWith } from '@/api/iot/iotDeviceSensorApi'

export default {
  name: 'LinkageCondition',
  props: {
    linkage: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      settingList: [],
      sensorWithSettingSelectList: [],
      setting: {},
      sensorList: []
    }
  },
  watch: {
    linkage: {
      deep: true,
      handler() {
        this.listSensorWithSetting()
      }
    }
  }, created() {
    this.listSensorWithSetting()
  }, methods: {
    settingChange(item) {
      for (const sensor of this.sensorList) {
        for (const deviceSetting of sensor.settingList) {
          if (deviceSetting.keyName === item.selectedSetting[1] && deviceSetting.port === item.selectedSetting[0]) {
            for (const i in this.settingList) {
              const target = this.settingList[i]
              if (target.selectedSetting[1] === item.selectedSetting[1] && target.selectedSetting[0] === item.selectedSetting[0]) {
                target.settingType = deviceSetting.type
                this.settingList.splice(i, 1, target)
                return
              }
            }
          }
        }
      }
    },
    formatSensorType(type) {
      return formatSensorType(this, type)
    },
    insertOrUpdateLinkageSettingToDevice() {
      for (let i = 0, j = this.settingList.length; i < j; i++) {
        const setting = this.settingList[i]
        if (
          setting.selectedSetting == null ||
          setting.selectedSetting === ''
        ) {
          failureNotice(this, this.$t('setting'))
          return
        }
        setting.keyName = setting.selectedSetting[1]
        setting.port = setting.selectedSetting[0]
      }
      if (this.linkage.type === 'device') {
        insertOrUpdateLinkageSettingToDevice({
          linkageId: this.linkage.linkageId,
          settingList: this.settingList
        }).then(res => {
          const { code } = res
          if (code === '200') {
            successNotice(this)
          }
          this.listLinkageSetting()
        })
      } else if (this.linkage.type === 'server') {
        insertOrUpdateLinkageSettingToServer({
          linkageId: this.linkage.linkageId,
          settingList: this.settingList
        }).then(res => {
          const { code } = res
          if (code === '200') {
            successNotice(this)
          }
          this.listLinkageSetting()
        })
      } else {
        failureNotice(this, this.$t('type'))
        return
      }
    },
    listLinkageSetting() {
      listLinkageSetting({
        linkageId: this.linkage.linkageId
      }).then(res => {
        const { code, data } = res
        const settingList = []
        if (code === '200') {
          for (const setting of data) {
            settingList.push(this.formatSetting(setting))
          }
        }
        this.settingList = settingList
      })
    },
    formatSetting(setting) {
      for (const sensor of this.sensorList) {
        for (const deviceSetting of sensor.settingList) {
          if (deviceSetting.keyName === setting.keyName && deviceSetting.port === setting.port) {
            setting.selectedSetting = [
              deviceSetting.port,
              deviceSetting.keyName
            ]
            if (deviceSetting.type === 'slider') {
              setting.value = parseInt(setting.value)
            }
            setting.paramList = deviceSetting.paramList
            setting.settingType = deviceSetting.type
            return setting
          }
        }
      }
    },
    delSetting(item) {
      for (let i = 0; i < this.settingList.length; i++) {
        if (item === this.settingList[i]) {
          this.settingList.splice(i, 1)
        }
      }
    },
    addSetting() {
      this.setting = {
        autoReset: false,
        resetValue: null,
        triggerType: 'edge'
      }
      this.settingList.push({
        ...this.setting
      })
    },
    listSensorWithSetting() {
      listSensorWith({
        deviceId: this.linkage.deviceId,
        withSetting: true,
        canDeviceLinkage: true
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.sensorList = data
          const sensorWithSettingSelectList = []
          for (let i = 0; i < data.length; i++) {
            const sensor = data[i]
            const item = {
              value: sensor.port,
              label: this.formatSensorType(sensor.type) + this.$t('port') + ':' + sensor.port + '  ' + sensor.sensorName,
              children: []
            }
            const settingListLen = sensor.settingList.length
            for (let j = 0; j < settingListLen; j++) {
              const setting = sensor.settingList[j]
              item.children.push({
                value: setting.keyName,
                label: setting.name,
                disabled: setting.type === 'timeSlot' || setting.type === 'multiCustom' || setting.disabled || !setting.canDeviceLinkage
              })
            }
            sensorWithSettingSelectList.push(item)
          }
          this.sensorWithSettingSelectList = sensorWithSettingSelectList
        }
        this.listLinkageSetting()
      })
    }
  }
}
</script>

